<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef" @selection-change="selectionChange">
      <!-- 表格按钮后置扩展 -->
      <template #tableAfterButtons>
        <a-button type="outline" @click="batchGenerate"
          ><template #icon><icon-code /></template>生成代码</a-button
        >
        <a-button @click="() => loadTableRef.open()" type="outline" status="success"
          ><template #icon><icon-export /></template>装载数据表</a-button
        >
      </template>
      <!-- 操作前置扩展 -->
      <template #operationBeforeExtend="{ record }" v-if="!isRecovery">
        <a-link @click="previewRef.open(record.id)"><icon-eye /> 预览</a-link>
        <a-popconfirm content="同步会重置字段配置生成信息，确定同步吗?" position="bottom" @ok="sync(record.id)">
          <a-link><icon-sync /> 同步</a-link>
        </a-popconfirm>
        <a-link @click="() => editRef.open(record.id)"><icon-edit /> 编辑</a-link>
      </template>
      <template #operationAfterExtend="{ record }">
        <a-dropdown trigger="hover" @select="selectOperation($event, record.id)">
          <a-link><icon-code /> 生成</a-link>
          <template #content>
            <a-doption value="generateCode">压缩包下载</a-doption>
            <a-doption value="generateFile">生成到模块</a-doption>
          </template>
        </a-dropdown>
      </template>
    </ma-crud>

    <load-table ref="loadTableRef" @success="selectSuccess" />

    <preview ref="previewRef" />

    <edit-info ref="editRef" @success="selectSuccess" />
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue"
import generate from "@/api/setting/generate"
import { useRouter } from "vue-router"
import { Message, Modal } from "@arco-design/web-vue"
import tool from "@/utils/tool"

import LoadTable from "./components/loadTable.vue"
import Preview from "./components/preview.vue"
import EditInfo from "./components/editInfo.vue"

const crudRef = ref()
const editRef = ref()
const previewRef = ref()
const loadTableRef = ref()
const selections = ref([])

const router = useRouter()

const types = [
  { label: "单表CRUD", value: "single" },
  { label: "树表CRUD", value: "tree" }
]

const selectSuccess = (result) => {
  result && crudRef.value.refresh()
}

const sync = async (id) => {
  const response = await generate.sync(id)
  response.code === 200 && Message.success(response.message)
}

const selectOperation = (value, id) => {
  if (value === "generateCode") {
    generateCode(id)
    return
  }
  if (value === "generateFile") {
    Modal.info({
      title: "提示",
      content: "生成到模块将会覆盖原有文件，确定要生成吗？",
      simple: false,
      onBeforeOk: (done) => {
        generateFile(id)
        done(true)
      }
    })
    return
  }
}

const generateCode = async (ids) => {
  Message.info("代码生成下载中，请稍后")
  const response = await generate.generateCode({
    ids: ids.toString().split(",")
  })
  console.log(response)
  if (response) {
    tool.download(response, "saiadmin.zip")
    Message.success("代码生成成功，开始下载")
  } else {
    Message.error("文件下载失败")
  }
}

const generateFile = async (id) => {
  const response = await generate.generateFile({ id })
  response.code === 200 && Message.success(response.message)
}

const batchGenerate = () => {
  if (selections.value.length === 0) {
    Message.error("至少要选择一条数据")
    return
  }
  generateCode(selections.value.join(","))
}

const selectionChange = (row) => (selections.value = row)

const isRecovery = computed(() => (crudRef.value ? crudRef.value.isRecovery : false))

const crud = reactive({
  api: generate.getPageList,
  recycleApi: generate.getRecyclePageList,
  beforeRequest: (params) => {
    params.orderBy = "create_time"
    params.orderType = "desc"
  },
  showIndex: false,
  searchColNumber: 3,
  searchLabelWidth: "75px",
  pageLayout: "fixed",
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationColumnWidth: 350,
  delete: { show: true, api: generate.deletes, realApi: generate.realDestroy },
  recovery: { show: true, api: generate.recoverys }
})

const columns = reactive([
  { title: "表名称", dataIndex: "table_name", search: true, width: 200 },
  { title: "表描述", dataIndex: "table_comment", width: 150 },
  { title: "模板类型", dataIndex: "stub", width: 100 },
  {
    title: "生成类型",
    dataIndex: "tpl_category",
    formType: "select",
    width: 120,
    dict: { data: types, translation: true }
  },
  { title: "创建时间", dataIndex: "create_time", width: 180 }
])
</script>

<script>
export default { name: "setting:code" }
</script>

<style scoped></style>
